<!--
 * @Description: 我的课程
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-18 14:39:32
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-27 13:16:14
-->
<template>
    <bar title="我的课程" titleSize="max" :icon="true">
        <el-tabs
            class="order-tabs"
            v-model="tabstatus"
            @tab-click="handleClick"
        >
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="线上课程" name="1"></el-tab-pane>
            <el-tab-pane label="面授课程" name="2"></el-tab-pane>
        </el-tabs>
        <div class="orderList" v-if="list.length !== 0">
            <div class="item" v-for="item in list" :key="item.id">
                <div class="top">
                    <div class="left">时间：{{ dateFormat(item.createTime) }}</div>
                </div>
                <div class="body">
                    <div class="s1">
                        <div class="img-box">
                            <img :src="IMG_URL + item.cover" alt="" />
                        </div>
                        <div class="text">
                            <div class="name">
                                <span class="icon">{{ item.onlineType | onlineType}}</span>
                                {{item.title}}
                            </div>
                            <div class="info">
                                <span v-if="item.classTime">上课时间：{{item.classTime}}</span>
                                <br />
                                <span v-if="item.classAddressDetail">上课地点：{{item.classAddressDetail}}</span>
                            </div>
                        </div>
                        <div class="right">
                            <nuxt-link class="btn" :to="item.onlineType === 1 ? `/courseCenter/courseVideo/${item.topicId}` : `/courseCenter/courseDelis/${item.topicId}`">查看详情</nuxt-link>
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination
                class="pagination"
                background
                layout="prev, pager, next"
                :total="total"
                :pager-count="5"
                :page-size.sync="pageSize"
                @current-change="pageChange"
            >
            </el-pagination>
        </div>
        <no-data v-else text="暂无订单哦~"></no-data>
    </bar>
</template>
<script>
import { getCourseList } from "~/api";
export default {
    data() {
        return {
            // tabs订单状态
            tabstatus: "0",
            page: 1,
            pageSize: 10,
            total: 0,
            list: [],
        };
    },
    beforeMount() {
        this._getCourseList();
    },
    methods: {
        handleClick(event) {
            this._getCourseList();
        },
        // 获取课程列表
        _getCourseList() {
            getCourseList(
                this.tabstatus,
                this.page,
                this.pageSize
            ).then((res) => {
                if (res.data.code === 0) {
                    this.total = res.data.data.total;
                    this.list = res.data.data.list;
                }
            });
        },
        // 页数改变
        pageChange(page) {
            this.page = page;
            this._getCourseList();
        },
    },
    filters:{
        onlineType(val){
            switch (val){
                case 1:
                    return '线上课程'
                    break;
                case 2:
                    return '线下课程'
                    break;
                default:
                    break;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.orderList {
    .item {
        background: #ffffff;
        box-shadow: 0px 3px 6px rgba(153, 153, 153, 0.1);
        & + .item {
            margin-top: 20px;
        }
        .top {
            background: #f6f7f8;
            height: 50px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                color: #888888;
                font-size: 14px;
                span {
                    & + span {
                        margin-left: 10px;
                    }
                }
            }
            .right {
                font-size: 14px;
                color: #f93e3e;
            }
        }
        .body {
            padding: 0 20px;
            .s1 {
                display: flex;
                justify-content: space-between;
                padding: 24px 0;
                .img-box {
                    flex: 0 0 120px;
                    height: 75px;
                    overflow: hidden;
                }
                .text {
                    flex: 1;
                    padding: 0 14px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .name {
                        color: #333333;
                        font-size: 18px;
                        .icon {
                            background: #f5f7fa;
                            border-radius: 2px;
                            width: 62px;
                            height: 20px;
                            text-align: center;
                            line-height: 20px;
                            font-size: 12px;
                            color: #9199a1;
                            font-weight: 400;
                            margin-right: 5px;
                            display: inline-block;
                        }
                    }
                    .info {
                        color: #888888;
                        font-size: 14px;
                        line-height: 1.5;
                    }
                }
                .right {
                    flex: 0 0 100px;
                    display: flex;
                    align-items: flex-end;
                    .btn {
                        min-width: 100px;
                        height: 35px;
                        line-height: 33px;
                        font-size: 16px;
                        & + .btn {
                            margin-left: 14px;
                        }
                    }
                }
            }
        }
    }
    .pagination {
        text-align: center;
        padding: 20px 0;
    }
}
</style>